<template>
  <div class="markdown-container">
    <div class="md-tips">
      v-md-editor 是基于 Vue 开发的 markdown 编辑器组件
      <a target="_blank" href="http://ckang1229.gitee.io/vue-markdown-editor/zh/">(文档查看)</a>
    </div>
    <template v-if="!preViewFlag">
      <v-md-editor
        :left-toolbar="leftToolbar"
        :toolbar="toolbar"
        v-model="text"
        class="md-editor"
        @copy-code-success="handleCopyCodeSuccess"/>
    </template>
    <div class="preview-container" v-else>
      <v-md-preview :text="text"></v-md-preview>
    </div>
    <div class="button-container">
      <el-button type="primary" class="common-button" @click="submitContent">提交</el-button>
      <el-button type="primary" class="common-button" @click="onPreview">
        {{ preViewFlag ? '结束预览' : '预览'}}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return {
      preViewFlag: false,
      text: `## 欢迎使用markdown
      \n[mermaid流程图教程](https://uav360.gitee.io/gitbook/3-Chapter/0-README.html)
      \n\`\`\`mermaid
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
\`\`\`
\n[katex公式教程](https://fivecakes.com/p/5b1bd56d2392ec23b91bab2e)
\n[katex官网](https://www.bootcdn.cn/KaTeX/)
\n$$\\sum_{i=1}^n a_i=0$$
\n$$A\\xlongequal[sub-script]{super-script}B$$
\n$$D(X) = D(\\dfrac{X_1+X_2+X_3+...+X_n}{n})$$
      `,
    }
  },
  computed:{
    leftToolbar(){
      let lTbar = 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | tip save |'
      const keys = Object.keys(this.toolbar)
      keys.forEach(item =>{
        lTbar = lTbar + ` ${item}`
      })
      return lTbar
    },
    // 自定义工具栏
    toolbar(){
      const definedTool = {
        flowChart: {
          title: '插入流程图',
          icon: 'v-md-icon-tip',
          action(editor) {
            editor.insert(function (selected) {
              // selected 为当前选中的文本
              const content = selected;
              const url = `\n[mermaid流程图教程](https://uav360.gitee.io/gitbook/3-Chapter/0-README.html)`
              const example = `\n\`\`\`mermaid
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
\`\`\`
`
              return {
                // 要插入的文本
                text: `${url}${example}`,
                // 选中的文本，被text替换
                selected: content,
              };
            });
          },
        },
        katexFormula: {
          title: '插入公式',
          icon: 'v-md-icon-tip',
          action(editor) {
            editor.insert(function (selected) {
              // selected 为当前选中的文本
              const content = selected;
              const url = `\n[katex公式教程](https://fivecakes.com/p/5b1bd56d2392ec23b91bab2e)`
              const example = `\n$$sum_{i=1}^n a_i=0$$`
              return {
                // 要插入的文本
                text: `${url}${example}`,
                // 选中的文本，被text替换
                selected: content,
              };
            });
          },
        },
      }
      return definedTool
    }
  },
  methods:{
    handleCopyCodeSuccess(){
      this.$message.success('复制成功')
    },
    // 提交
    submitContent(){
      this.$message.success('提交成功')
    },
    // 预览
    onPreview(){
      this.preViewFlag = !this.preViewFlag
    },
  }
}
</script>

<style lang="scss" scoped>
.markdown-container{
  background-color: white;
  padding: 20px;
}
.md-tips{
  text-align: left;
  line-height: 36px;
  color: #c47474;
  padding: 0 20px;
  background-color: rgba(254,125,158,0.1);
  a{
    color: #cb6088;
  }
}
.md-editor{
  height: calc(100vh - 250px);
  border: 1px solid $greyColor;
}
.button-container{
  text-align: left;
  margin-top: 10px;
}
.preview-container{
  height: calc(100vh - 250px);
  text-align: left;
  border: 1px solid $greyColor;
}
</style>

<style lang="scss">
.v-md-editor.md-editor{
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.markdown-container{
  .v-md-editor__preview-wrapper{
    text-align: left !important;
  }
  .katex-display .katex{
    text-align: left !important;
  }
}
.preview-container{
  .v-md-editor-preview{
    overflow-y: scroll;
    height: calc(100vh - 250px) !important;
  }
  .vuepress-markdown-body{
    height: calc(100vh - 250px) !important;
  }
}
</style>
